<template>
	<div class="container">
		<!-- <div class="plugins-tips">通过 v-permiss 自定义指令实现权限管理，使用非 admin 账号登录，可查看效果。</div> -->
		<div class="mgb20">
			<span class="label">角色：</span>
			<el-select v-model="role" @change="handleChange">
				<el-option label="领导" value="admin"></el-option>
				<el-option label="员工" value="user"></el-option>
			</el-select>
		</div>
		<div class="mgb20 tree-wrapper">
			<el-tree
				ref="tree"
				:data="data"
				node-key="id"
				default-expand-all
				show-checkbox
				:default-checked-keys="checkedKeys"
			/>
		</div>
		<el-button type="primary" @click="onSubmit">保存权限</el-button>
	</div>
</template>

<script setup lang="ts" name="permission">
import { ref } from 'vue';
import { ElTree } from 'element-plus';
import { usePermissStore } from '../store/permiss';

const role = ref<string>('admin');

interface Tree {
	id: string;
	label: string;
	children?: Tree[];
}

const data: Tree[] = [
	{
		id: '1',
		label: '会议日历'
	},
	{
		id: '2',
		label: '议题一览表',
		// children: [
		// 	{
		// 		id: '15',
		// 		label: '编辑'
		// 	},
		// 	{
		// 		id: '16',
		// 		label: '删除'
		// 	}
		// ]
	},
	{
		id: '3',
		label: '通知界面'
	},
	// {
	// 	id: '4',
	// 	label: '表单相关',
	// 	children: [
	// 		{
	// 			id: '5',
	// 			label: '基本表单'
	// 		},
	// 		{
	// 			id: '6',
	// 			label: '文件上传'
	// 		}
	// 	]
	// },
	{
		id: '10',
		label: '议题申报'
	},
	{
		id: '11',
		label: '会议筹备'
	},

	{
		id: '13',
		label: '发布通知'
	},
	{
		id: '14',
		label: '会议纪要'
	},
	{
		id:'16',
		label:'权限管理'
	},
	{
		id:'17',
		label:'人事管理'
	}
];

const permiss = usePermissStore();

// 获取当前权限
const checkedKeys = ref<string[]>([]);
const getPremission = () => {
	// 请求接口返回权限
	checkedKeys.value = permiss.defaultList[role.value];
};
getPremission();

// 保存权限
const tree = ref<InstanceType<typeof ElTree>>();
const onSubmit = () => {
	// 获取选中的权限
	console.log(tree.value!.getCheckedKeys(false));
};

const handleChange = (val: string[]) => {
	tree.value!.setCheckedKeys(permiss.defaultList[role.value]);
};
</script>

<style scoped>
.tree-wrapper {
	max-width: 500px;
}
.label {
	font-size: 14px;
}
</style>
